<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>studentList</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>学生管理页面</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js}"></script>
</head>
<body>
<div style="margin-left:10px;margin-top:10px;">
    <div class="panel panel-primary">
        <div>
            <h3 type="text-align:center">学生管理平台</h3>
        </div>
        <div class="panel-body">
            <div style="display:inline-block;">
                <!--                <form method="post" action="/queryStu">-->
                <div style="float:left;padding:6px;">
                    <span>姓名：</span>
                </div>
                <div style="float:left;">
                    <input id="stuName" name="sname" class="form-control" style="width:200px;" type="text"
                           th:placeholder="姓名">
                </div>
                <div style="float:left;margin-left:20px;">
                    <input value="查 询" type="submit" class="btn btn-primary" id="searchbutton">
                </div>
                <div style="float:right;margin-left:300px;">
                    <a id="add" class="btn btn-primary" th:href="@{/add}">添加</a>
                </div>
                <!--                </form>-->
            </div>
        </div>
    </div>
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">姓名</th>
            <th scope="col">性别</th>
            <th scope="col">生日</th>
            <th scope="col">爱好</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody id="tbo">
        <tr th:each="stu:${students}">
            <td scope="row" th:text="${stu.getId()}"></td>
            <td th:text="${stu.getSname()}"></td>
            <td th:text="${stu.getSex()}"></td>
            <td th:text="${#dates.format(stu.getBirthday(),'yyyy-MM-dd')}"></td>
            <td th:text="${stu.getHobbies()}"></td>
            <td>
                <a class="btn btn-primary" th:href="@{/upd/}+${stu.getId()}">编辑</a>
                <a class="btn btn-warning" th:href="@{/delete/}+${stu.getId()}">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script type="text/javascript">
    //转换日期格式
    function add0(m) {
        return m < 10 ? '0' + m : m
    };

    function format(shijianchuo) {
//shijianchuo是整数，否则要parseInt转换
        var time = new Date(shijianchuo);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
    };
    $("#searchbutton").click(function () {
        let name = $("#stuName").val();
        $.ajax({
            url: "/queryStu",
            method: "post",
            data: {sname: name},
            dataType: "json",
            success: function (result) {
                //清空id=data的表格第一行（表头）以外的数据
                $("#tbo").empty();
                console.log(result);
                $.each(result, function (index, stu) {
                    $("#tbo").append(
                        "<tr>" +
                        "<td>" + stu.id + "</td>" +
                        "<td>" + stu.sname + "</td>" +
                        "<td>" + stu.sex + "</td>" +
                        "<td>" + format(stu.birthday) + "</td>" +
                        "<td>" + stu.hobbies + "</td>" +
                        "<td>" +
                        "<a class='btn btn-primary disabled' th:href=\"@{/upd/}+${" + stu.id + "}\">编辑</a>" +
                        "\t&nbsp;" +
                        "<a class='btn btn-warning disabled' th:href=\"@{/delete/}+${" + stu.id + "}\">删除</a>" +
                        "</td>" +
                        "</tr>"
                    )
                })
            },
            fail: function () {
                console.log("no submit");
            }
        })
    })
</script>
</html>